<template>
    <el-tabs type="border-card" class="profileTab">
      <el-tab-pane label="个人信息">
        <stu-info-display
        :stu-info="stuInfo"
        :account="currentAccount"
        ></stu-info-display>
      </el-tab-pane>
      <el-tab-pane label="修改信息">
        <stu-info-modify
          :stu-info="stuInfo"
          :account="currentAccount"
          @stuInfoModify = "Modify"
        ></stu-info-modify>
      </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import stuInfoDisplay from '@/components/studentPage/studentProfile/stuInfoDisplay.vue'
import stuInfoModify from '@/components/studentPage/studentProfile/stuInfoModify.vue'
import modifyProfile from '@/assets/PublicFunction/AxiosFunctions/studentInfo/modifyProfile'
import { ElMessage } from 'element-plus/lib'
export default {
  name: 'stuProfile',
  components: {
    stuInfoDisplay, stuInfoModify
  },
  setup () {
    const Store = useStore()
    const studentLogin = computed(() => Store.getters['CurrentAccount/getAccountState'].Login)
    const currentAccount = computed(() => Store.getters['CurrentAccount/getCurrentAccount'])
    const stuInfo = computed(() => Store.getters['CurrentAccount/getCurrentInfo'])
    function Modify (InfoPack: any) {
      modifyProfile(Store.getters['CurrentAccount/getCurrentAccount'], InfoPack, (resp: any) => {
        Store.dispatch('CurrentAccount/setInfo', InfoPack)
        ElMessage.success('修改成功！')
      }, (resp: any) => {
        ElMessage.error('网络错误！')
      })
    }
    return {
      Store, studentLogin, stuInfo, currentAccount, Modify
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/Fonts/FontMap/FontMap";
  @import "../../assets/Fonts/FontMap/FontList.css";
.profileTab{
  font-family: $SH_Serif_Regular;
}
</style>
